<!--
@fucntion: 专项类设备基本情况
-->
<template>
  <el-card style="background-color: #F2F6FC;">
    <el-card style="background-color: #DCDFE6;"> 
      <el-row :gutter="24">
          <el-col :span="6">
            <span>专项类设备总数: {{Adata.ZXLSBZSL}}</span>
          </el-col>
          <!-- <el-col :span="4">
            <span>涉及科室:</span>
          </el-col> -->
          <el-col :span="6">
            <span>专项类总原值: {{Adata.ZXLSBZYZ}}(万元)</span>
          </el-col>
          <el-col :span="12">
            <el-date-picker
              v-model="Adata.value"
              type="daterange"
              align="right"
              unlink-panels
              @input="changeRefresh()"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-col>
        </el-row>
    </el-card>
    <el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <span style="font-size:14px; float: left">专项类设备年代情况</span>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="12"> 
          <el-table
            size="mini"
            :data="Adata.SpecialData1"
            height="300"
            border
            style="width: 100%">
            <el-table-column
              prop="ZXLNF"
              label="年份">
            </el-table-column>
            <el-table-column
              prop="ZXLSL"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="ZXLSLBL"
              label="占总数比例">
            </el-table-column>
            <el-table-column
              prop="ZXLYZ"
              label="原值（万元）">
            </el-table-column>
            <el-table-column
              prop="ZXLYZBL"
              label="占总原值比例">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main1" style="width: 100%;height:300px"></div>
        </el-col>
      </el-row>
          <el-card style="background-color: #F2F6FC;"> 
      <el-row :gutter="24">
          <el-col :span="6">
            <span>设备: {{Adata.ZXLSB_XZ_SL}}</span>
          </el-col>
          <el-col :span="6">
            <span>原值: {{Adata.ZXLSB_XZ_YZ}}(万元)</span>
          </el-col>
        </el-row>
    </el-card>
    </el-card>
    <el-card>
      <el-card style="background-color: #F2F6FC;"> 
        <span style="font-size:14px; float: left">专项类设备科室分布情况</span>
      </el-card>
      <el-row :gutter="24">
        <el-col :span="12"> 
          <el-table
            size="mini"
            :data="Adata.SpecialData2"
            height="500"
            border
            style="width: 100%">
            <el-table-column
              prop="ZXLXH"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="ZXLKS"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="ZLXSL"
              label="台件数">
            </el-table-column>
            <el-table-column
              prop="ZXLYZ"
              label="设备原值（万元）">
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
          <div id="main2" style="width: 100%;height:500px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </el-card>
</template>

<script>
//导入echarts
import echarts from "echarts";

export default {
  name: "Detailed",
  methods: {

  },
  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          },{ 
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365*3);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
      dataAttr1:[],//柱状图图数据
      dataAttr2:[],//饼图图数据
      Adata:{
        SpecialData1:[],
        SpecialData2:[],
        value:'',
        ZXLSBZSL:0,
        ZXLSBZYZ:0,
        ZXLSB_XZ_SL:0,
        ZXLSB_XZ_YZ:0,
      },
    };
  },
  methods: {
    changeRefresh(){
      var me = this;
      this.Refresh();
      me.$message.success("更改时间段成功！");
    },
    //刷新页面
    Refresh() {
      var me = this;
      this.Adata.ZXLSB_XZ_SL = 0
      this.Adata.ZXLSB_XZ_YZ = 0
      let url = "/static/data/Special.json";// /jcJsxxb
      if(url !== "") {
        me.getRequest(url,this.Adata.value).then(resp => {
            if(resp.status == 200) {
              this.Adata.SpecialData1 = resp.data.results1;
              this.Adata.SpecialData2 = resp.data.results2;
              this.dataAttr1 = resp.data.data1;
              this.dataAttr2 = resp.data.data2;
              this.Adata.ZXLSBZSL = resp.data.ZXLSBZSL;
              this.Adata.ZXLSBZYZ = resp.data.ZXLSBZYZ;
              this.onto();
              this.onSJHC();
            }
        });
      }
    },
    onSJHC(){//数据合成
      for(var i=0;i<(this.Adata.SpecialData1.length);i++){
        this.Adata.SpecialData1[i].ZXLSLBL = (this.Adata.SpecialData1[i].ZXLSL / this.Adata.ZXLSBZSL)*100
        this.Adata.SpecialData1[i].ZXLYZBL = (this.Adata.SpecialData1[i].ZXLYZ / this.Adata.ZXLSBZYZ)*100
        this.Adata.SpecialData1[i].ZXLSLBL = this.Adata.SpecialData1[i].ZXLSLBL.toFixed(2) + '%'
        this.Adata.SpecialData1[i].ZXLYZBL = this.Adata.SpecialData1[i].ZXLYZBL.toFixed(2) + '%'
      };
      for(var j=0;j<(this.Adata.SpecialData1.length);j++){
        this.Adata.ZXLSB_XZ_SL = this.Adata.ZXLSB_XZ_SL + this.Adata.SpecialData1[j].ZXLSL
        this.Adata.ZXLSB_XZ_YZ = this.Adata.ZXLSB_XZ_YZ + this.Adata.SpecialData1[j].ZXLYZ
      }
    },
    onto: function() {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main1'));
      var myChart2 = echarts.init(document.getElementById('main2'));
      // 指定图表的配置项和数据
      var option1 = {
          legend: {},
          tooltip: {},
          dataset: {
              dimensions: ['product', '数量', '原值'],
              source: this.dataAttr1
          },
          xAxis: {type: 'category'},
          yAxis: {},
          series: [
              {type: 'bar'},
              {type: 'bar'},
          ]
      };
      var option2 = {
          series : [
              {
                  name: '科室',
                  type: 'pie',
                  radius: '55%',
                  roseType: 'angle',
                  data:this.dataAttr2
              }
          ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      myChart2.setOption(option2);
    }
  },
  created: function() {
    var me = this;

    this.sentry = this.$route.query.ID//储存url中的参数

    this.Refresh()
  },
};
</script>

<style lang="scss">
</style>